<template>
<div class="box">
    <!-- <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>详情</span>
            <el-button size="mini" style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
        </div>
        <div v-for="(item,index) in list" :key="index" class="text item">
            {{'列表内容 ' }}
        </div>
    </el-card> -->

    <div class="left">
        <div class="head" v-if="!isCollapse">
            <div>检索结果:</div>
            <div style="margin-top:5px">{{index}}/{{total}}</div>
        </div>
        <el-menu :style={height:height} default-active="1" class="el-menu-vertical-demo " @open="handleOpen" @close="handleClose" active-text-color="#ffffff" :collapse="isCollapse">

            <el-menu-item @click="itemClick(item)" v-for="(item,i) in list" :key="i" :index="i+1+''">

                <div class="spans" :title="item.title">
                    <span class="item">{{item.public_number}}</span>
                    <span class="item">{{item.title}}</span>
                </div>
                <!-- <span slot="title">123</span> -->
            </el-menu-item>

        </el-menu>
        <div class="page">
            <div @click="indexChange(0)">
                <el-button size="mini" style="backgroundColor:#008ac0" type="primary">上一页</el-button>
            </div>
            <div @click="indexChange(1)" style="margin-left:20px">
                <el-button size="mini" type="primary" style="backgroundColor:#008ac0">下一页</el-button>
            </div>
        </div>

    </div>
    <div class="right">
        <div class="title">
            <div style="display:flex;flex-direction:row;align-items:center">
                <span style="margin-right:14px;font-weight:700">{{row.public_number}}</span>
                <span style="display:block;backgroundColor:green;color:#ffffff;padding-left:10px;
                font-size:12px;border-radius: 4px;display:flex;align-items:center;justify-content: center;
                padding-right:10px;padding-top:4px;padding-bottom:4px">{{row.legal_status}}</span>
            </div>
            <div style="margin-top: 10px;font-size:15px">
                {{row.title}}
            </div>
        </div>
        <el-tabs style="margin-top:12px" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">

                <div style="width:300px">
                    <div style="font-size:15px;font-weight:700;display:flex;flex-direction:row;align-items:center;">
                        <img src="../../assets/numberDate.png" style="width:20px;height:16px" alt="">
                        <div style="margin-left:3px">号码和日期</div>

                    </div>
                    <div style="margin-top:10px; font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">
                        <span style="flex:1">申请号：</span><span style="flex:1.5">{{row.application_number}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">公开(公告)号：</span><span style="flex:1.5">{{row.public_number}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">申请日:</span><span style="flex:1.5">{{row.application_date}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">公开(公告)日:</span><span style="flex:1.5">{{row.public_date}}</span>
                    </div>
                </div>

                <div style="margin-top:30px;width:300px">
                    <!-- <p style="font-size:15px;font-weight:700"></p> -->
                    
                     <div style="font-size:15px;font-weight:700;display:flex;flex-direction:row;align-items:center;">
                        <img src="../../assets/xiangguan.png" style="width:20px;height:16px" alt="">
                        <div style="margin-left:3px">相关人信息</div>

                    </div>


                    <div style="margin-top:10px; font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">
                        <span style="flex:1">申请人:</span><span style="flex:1.5">{{row.applicants}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">发明人：</span><span style="flex:1.5">{{row.inventors}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">当前权利人:</span><span style="flex:1.5">{{row.assignees}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">代理机构:</span><span style="flex:1.5">{{row.agency||"暂无"}}</span>
                    </div>
                    <!-- <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">发明人(设计人)个数:</span><span style="flex:1">{{row.inventors_count}}</span>
                    </div> -->
                </div>

                <div style="margin-top:30px;width:300px">
                    <!-- <p style="font-size:15px;font-weight:700">专利奖信息</p> -->
 
                     <div style="font-size:15px;font-weight:700;display:flex;flex-direction:row;align-items:center;">
                        <img src="../../assets/zhuanli.png" style="width:20px;height:16px" alt="">
                        <div style="margin-left:3px">专利奖信息</div>

                    </div>


                    <div style="margin-top:10px; font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">
                        <span style="flex:1">中国专利奖项:</span><span style="flex:1.5">{{row.reward_name||"暂无"}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">中国专利奖等级：</span><span style="flex:1.5">{{row.reward_level||"暂无"}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">地方专利奖项:</span><span style="flex:1.5">{{row.region_reward_name||"暂无"}}</span>

                    </div>

                </div>

                <div style="margin-top:30px;width:300px">
                    <!-- <p style="font-size:15px;font-weight:700">其他信息</p> -->
                      <div style="font-size:15px;font-weight:700;display:flex;flex-direction:row;align-items:center;">
                        <img src="../../assets/qita.png" style="width:20px;height:16px" alt="">
                        <div style="margin-left:3px">其他</div>

                    </div>
                    <div style="margin-top:10px; font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">
                        <span style="flex:1">IPC主分类号:</span><span style="flex:1.5">{{row.ipc_main||"暂无"}}</span>

                    </div>
                    <div style="font-size:14px;color:#252525;width:100%;display:flex;flex-direction:row;align-items:center;justify-content: space-between;margin-bottom:3px">

                        <span style="flex:1">专利类型</span><span style="flex:1.5">{{row.patent_type||"暂无"}}</span>

                    </div>

                </div>

            </el-tab-pane>
            <el-tab-pane label="法律信息" name="second">

                <div style="margin-top:20px">
                    <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;padding-left:5px">法律状态</div>
                        <div style="flex:1;height:100%;line-height:35px;padding-left:5px">{{row.legal_status}}</div>
                    </div>

                    <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">专利被提起无效次数</div>
                            <div style="flex:1;padding-left:5px">{{row.patent_invalidation_count}}</div>

                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">许可次数</div>
                            <div style="flex:1;padding-left:5px">{{row.licensed_count}}</div>
                        </div>
                    </div>

                     <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">转让次数</div>
                            <div style="flex:1;padding-left:5px">{{row.transfered_count||0}}</div>

                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">质押次数</div>
                            <div style="flex:1;padding-left:5px">{{row.pledges_count}}</div>
                        </div>
                    </div>

                      <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">被引用次数</div>
                            <div style="flex:1;padding-left:5px">{{row.cited_count||0}}</div>

                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">是否复审</div>
                            <div style="flex:1;padding-left:5px">{{row.has_recheck==0 ?"否":"是"}}</div>
                        </div>
                    </div>





                   
                    <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">是否专利被宣告无效</div>
                            <div style="flex:1;padding-left:5px">{{row.is_patent_invalidation==0 ?"否":"是"}}</div>

                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">是否涉诉专利</div>
                            <div style="flex:1;padding-left:5px">{{row.has_lawsuit==0 ?"否":"是"}}</div>
                        </div>
                    </div>
                </div>

            </el-tab-pane>
            <el-tab-pane label="价值信息" name="third">

                 <div style="margin-top:20px">
                    <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;padding-left:5px">是否高专利价值</div>
                        <div style="flex:1;height:100%;line-height:35px;padding-left:5px">{{row.is_high_cost==0 ?"否":"是"}}</div>
                    </div>

                    <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">专利平分</div>
                            <div style="flex:1;padding-left:5px">{{row.patent_score||"暂无"}}</div>

                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">专利估值(万元)</div>
                            <div style="flex:1;padding-left:5px">{{row.patent_cost||"暂无"}}</div>
                        </div>
                    </div>

                     <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                       
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;padding-left:5px">
                           高价值专利要素
                        </div>
                    </div>



                      <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                             <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">战略性新兴产业</div>
                            <div style="flex:1;padding-left:5px">{{row.is_strategic_emerging==0 ?"否":"是"}}</div>
                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">是否海外同族</div>
                            <div style="flex:1;padding-left:5px">{{row.has_abroad_family==0 ?"否":"是"}}</div>
                        </div>
                    </div>


                      <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;">
                        <div style="flex:1;border-right:1px solid #cccccc;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                             <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">发明维持超过10年</div>
                            <div style="flex:1;padding-left:5px">{{row.is_duration_ten_year==0 ?"否":"是"}}</div>
                        </div>
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">较高质押融资金额</div>
                            <div style="flex:1;padding-left:5px">{{row.is_high_inventory==0 ?"否":"是"}}</div>
                        </div>
                    </div>





                   
                    <div style="width:800px;display:flex;flex-direction:row;height:35px;align-items:center;font-size:14px;
                    border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;">
                        
                        <div style="flex:1;height:100%;line-height:35px;display:flex;flex-direction:row;height:35px;align-items:center;">
                            <div style="flex:1;height:100%;border-right:1px solid #cccccc;padding-left:5px">获得国家科学技术奖或中国专利奖</div>
                            <div style="flex:1;padding-left:5px">{{row.has_reward==0 ?"否":"是"}}</div>
                        </div>
                    </div>
                </div>






            </el-tab-pane>

        </el-tabs>

    </div>

</div>
</template>

<script>
import {
    toRetrieval
} from '@/api/retrieval'
export default {
    name: 'Detail',
    data() {
        return {
            isCollapse: false,
            height: (window.innerHeight - 50 - 50 - 40) + 'px',
            index: 1,
            total: 100,
            list: [],
            id: 1,
            row: {},
            activeName: 'first',

        }
    },
    created() {

    },
    mounted() {
        this.index = localStorage.getItem("searchIndex")
        this.total = Math.ceil(localStorage.getItem("total") / 20)
        window.onresize = () => {
            //    console.log("1")
            this.height = (window.innerHeight - 50 - 50 - 40) + "px"

        }
        this.list = this.formatList(JSON.parse(localStorage.getItem("tableData")))
        this.row = JSON.parse(localStorage.getItem("resultItem"))

        this.id = this.row.id

    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },

        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        itemClick(item) {
            this.id = item.id
            this.row = item
            // console.log("id", item)
        },
        back() {
            this.$router.go(-1)
        },
        formatList(list) {
            let id = 0
            list.forEach(item => {
                id = id + 1
                item.id = id
            })
            return list
        },
        indexChange(type) {
            if (type == 0) {

                this.index = (this.index - 1) == 0 ? 1 : this.index - 1
                let data = JSON.parse(localStorage.getItem("searchData"))
                data.pageIndex = this.index

                toRetrieval(data).then(res => {
                    // console.log("数据", res.data)
                    let {
                        total,
                        values
                    } = res.data

                    this.list = this.formatList(values)
                    let arr = this.list.filter(item => {
                        return item.id == this.id
                    })
                    this.row = arr[0]

                })

            }
            if (type == 1) {

                this.index = (this.list.length < 20) ? this.index : Number(this.index) + 1

                if (this.index >= this.total) {
                    this.index = this.total
                }

                let data = JSON.parse(localStorage.getItem("searchData"))
                data.pageIndex = this.index

                toRetrieval(data).then(res => {
                    // console.log("数据", res.data)
                    let {
                        total,
                        values
                    } = res.data

                    this.list = this.formatList(values)
                    let arr = this.list.filter(item => {
                        return item.id == this.id
                    })
                    this.row = arr[0]

                })

            }
        }

    },

}
</script>

<style lang="scss" scoped>
// .el-menu-vertical-demo:not(.el-menu--collapse) {
//     width: 260px;
//     min-height: 400px;
// }

.box {
    width: 100%;

    // overflow: auto;
    // height: 100%;
    // border: 1px solid #ebebeb;
    // box-shadow: 4px 4px 4px #efeeee;
    // border-radius: 6px;S
    // position: relative;
    // left: 50%;
    // transform: translateX(-50%);
    // padding-bottom: 20px;
    // top:20px;

    display: flex;
    

    .left {
        border-right: 2px solid #cccccc;
        overflow: hidden;
        // width: 240px; //此宽度 决定收缩

        .el-menu-vertical-demo {

            overflow: hidden;
        }

        .head {
            width: 100%;
            background-color: rgb(135, 141, 173);
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: left;
            color: #ffffff;
            font-size: 14px;
            padding-left: 20px;
            font-weight: 700;
            font-family: "Times New Roman", Georgia, Serif;

        }

        .page {
            width: 100%;
            height: 40px;
            display: flex;
            font-size: 14px;
            background-color: rgb(135, 141, 173);
            ;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-family: "Times New Roman", Georgia, Serif;
        }

        .el-menu {
            overflow: auto;
            width: calc(100% + 20px);

            // background-color: red;
            background: url('../../assets/leftBg.jpg') no-repeat center;
            background-size: 100% 100%;

            .el-menu-item {
                overflow: hidden;
                line-height: normal;

                .spans {
                    // color: red;
                    display: flex;
                    flex-direction: column;
                    width: 240px;
                    height: 100%;
                    color:#ffffff;

                    // align-items: center;
                    justify-content: center;

                    .item {
                        display: block;
                        // height: 20px !important;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-clamp: 1;
                        font-family: "Times New Roman", Georgia, Serif;

                        // color: #;

                    }

                }
            }

            .el-menu-item.is-active {
                background-color: rgba(65, 73, 96, 0.6);
            }

            .el-menu-item:hover {
                background-color: rgba(65, 73, 96, 0.6);
                //   color: #fff!important;
            }

        }

        // .el-menu--collapse {
        //     width: 0
        // }

    }

    .right {
        flex: 1;
        width: 100%;

        padding: 20px;

    }

}
</style>
